<template>
  <div class="message_container" v-show="visible">
    <div class="message_wrapper">
      <div class="message_content">
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
      visible: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.message_container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999999999;
  .message_wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .message_content {
      padding: 20px;
      background-color: rgba(230, 230, 230, 0.8);
      border-radius: 8px;
    }
  }
}
</style>